<template>
	<div class="wechat-list">
		<list-title :data="header" @changeVisible="changeVisible"></list-title>
		<list-table :list="wechatList" :tableLoading="tableLoading" :footer="true" :pagination="pagination" :appid="$route.query.appid">
			<template v-slot:data>
				<el-table-column prop="appid" label="APPID"></el-table-column>
				<el-table-column prop="appsecret" label="APPSECRET"></el-table-column>
				<el-table-column prop="add_time" label="添加时间" width="150px"></el-table-column>
				<el-table-column label="操作" width="100">
					<template slot-scope="scope">
						<el-popover
						placement="top"
						width="160"
						v-model="delTip[scope.$index+1]"  v-if="auth.delete">
							<p class="del-tip"><span class="el-icon-question"></span>确定删除吗？</p>
							<div style="text-align: right; margin: 0">
								<el-button size="mini" type="text" @click="delTip.splice(scope.$index+1, 1, false)">取消</el-button>
								<el-button type="primary" size="mini" @click="handleDelete(scope.$index, scope.row)">确定</el-button>
							</div>
							<el-button type="text" slot="reference" :disabled='submitLock[scope.$index+1]'>
								删除 <span class="el-icon-loading" v-if='submitLock[scope.$index+1]'></span>
							</el-button>
						</el-popover>
					</template>
				</el-table-column>
			</template>
		</list-table>
		<!-- 添加账号 开始 -->
		<el-dialog :title="dialogTitle" :visible.sync="header.dialogs[0].visible" :close-on-click-modal="false" width="460px">
			<el-form :model="wechatForm" :rules="rules" ref="wechatForm" label-width="100px">
				<el-form-item label="APPID" prop="data.appid" style="width: 378px;">
					<el-input v-model="wechatForm.data.appid" placeholder="APPID"></el-input>
				</el-form-item>
				<el-form-item label="APPSECRET" prop="data.appsecret" style="width: 378px;">
					<el-input v-model="wechatForm.data.appsecret" placeholder="APPSECRET"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="header.dialogs[0].visible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('wechatForm')" :disabled='wechatForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='wechatForm.submitLock'></span>
				</el-button>
			</div>
		</el-dialog>
		<!-- 添加账号 结束 -->
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {judgeAuth} from "static/js/common.js"
import {domain} from '@/api';
import {mapGetters} from 'vuex'

export default {
	data() {
		return {
			/*comid*/
			comid: this.$route.query.comid,
			/*头部数据*/
			header: {
				title: '微信账号列表',
				reload: true,
				dialogs: [
					{
						title: '添加账号',
						type: 'primary',
						visible: false,
						auth: false,
					}
				]
			},
			auth: {
				editor: false,//编辑
				delete: false,//删除
			},
			dialogTitle: '添加变量',//dialog标题
			/*列表数据*/
			wechatList: [
				// {
				// 	id: 1,
				// 	appid: 1,
				// 	appsecret: '',
				// 	isdefault: '',
				// 	add_time: '',
				// },
			],
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			tableLoading: true,
			delTip: [],//刪除提示
			submitLock: [],
			/*添加表单数据*/
			wechatForm: {
				submitLock: false,
				data: {
					id: 0,
					appid: 'wxc15b4beaa47e983e',
					appsecret: 'f5bcbf942241532648f0f607b2497b20',
				}
			},
			rules: {
				data: {
					appid: [
						{ required: true, message: '请输入APPID', trigger: 'blur' },
						{ min: 18, max: 18, message: '长度在为 18 个字符', trigger: 'blur' },
					],
					appsecret: [
						{ required: true, message: '请输入APPSECRET', trigger: 'blur' },
						{ min: 32, max: 32, message: '长度在为 32 个字符', trigger: 'blur' },
					],
				}
			}
		};
	},
	components: {
		ListTitle,
		ListTable
	},
	created: function() {
		/*获取列表数据*/
		this.getWechatList()
		/*权限判断显示*/
		this.header.dialogs[0].auth = (judgeAuth('addWechat', this.allMenuList) == undefined)?false:true
		this.auth.editor = (judgeAuth('modifyWechat', this.allMenuList) == undefined)?false:true
		this.auth.delete = (judgeAuth('delWechat', this.allMenuList) == undefined)?false:true
	},
	methods: {
		/*取出列表数据*/
		getWechatList: function(){
			if(this.$api.wechatList != undefined){
				this.$baseURL(domain.ac)
				this.$get(this.$api.wechatList, this.$route.query).then(res => {
					if(res.data.code === 0){
						if(res.data.data != undefined){
							this.wechatList = []
							Object.keys(res.data.data.list).forEach((k) => {
								this.wechatList.push ({
									id: res.data.data.list[k].com_id,
									appid: res.data.data.list[k].appid,
									appsecret: res.data.data.list[k].appsecret,
									isdefault: res.data.data.list[k].isdefault,
									add_time: res.data.data.list[k].add_time,
								});
							})
							this.pagination = res.data.data.pageInfo
						}
						this.tableLoading = false
					}
				})
				.catch(err => {})
				.finally(() => {}) 
			}
		},
		/*dialog切换 方便子组件调用*/
		changeVisible: function(index){
			this.dialogTitle = '添加账号'
			this.wechatForm.data.id = 0

			this.header.dialogs[index].visible = !this.header.dialogs[index].visible
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.wechatForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.wechatForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addWechat//默认是添加
						if(this.wechatForm.data.id > 0){//修改
							apiUrl = this.$api.modifyWechat
						}
						if(apiUrl != undefined){
							this.$baseURL(domain.ac)
							this.$post(apiUrl, {
								comid: this.comid,
								CompanyWechat: this.wechatForm.data
							}).then(res => {
								console.log(res);
								/*成功*/
								if(res.data.code == 0){
									this.getWechatList()
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'success'
									});

									if(this.wechatForm.data.id > 0){
										this.reload();
									}else{
										this.$refs[formName].resetFields();
									}
								}else{
									this.$message({
										showClose: true,
										message: res.data.info,
										type: 'error'
									});
								}
								this.wechatForm.submitLock = false;
							});
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
</style>